<template>
  <div class="registered-wrap">
    <div class="registered-title">
      <img src="~@/assets/images/registered-title.png" alt="">
    </div>
    <div class="registered-containner">

      <el-form :rules="rules" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="
                  登录账号：
                " prop="key1">
              <el-input v-model="formLabelAlign.key1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="
                  登录人姓名：
                " prop="key2">
              <el-input v-model="formLabelAlign.key2"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="
                  登录人电子邮箱：
                " prop="key3">
              <el-input v-model="formLabelAlign.key3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="
                  注册类型：
                " prop="key4">
              <el-radio-group v-model="formLabelAlign.key4">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="
                  登录密码：
                " prop="key5">
              <el-input v-model="formLabelAlign.key5"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="
                  确认密码：
                " prop="key6">
              <el-input v-model="formLabelAlign.key6"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="
                  公司名称：
                " prop="key7">
              <el-input v-model="formLabelAlign.key7"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="
                   统一社会信用代码：
                " prop="key8">
              <el-input v-model="formLabelAlign.key8"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="
                  手机号：
                " prop="key9">
              <el-input v-model="formLabelAlign.key9"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="
                  验证码：
                " prop="key10">
              <el-input v-model="formLabelAlign.key10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-checkbox v-model="checked">同意 </el-checkbox>
            <span style="color:#1890FF;cursor: pointer;" @click="dialogSeeMoreVisible=true">《我已阅读并同意相关条款》</span>
          </el-col>
          <el-col :span="12">
            <span style="color:#1890FF;cursor: pointer;" @click="dialogSeeMoreVisible1=true">查看需要准备资料</span>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <div class="registered-btn">
      <el-button type="primary" @click="registered">立即注册</el-button>
    </div>
  </div>

  <div class="check-out-the-material">
    <el-dialog v-model="dialogSeeMoreVisible1" :show-close="false">
      <div class="material-title">请先准备如下资料</div>
      <div class="material-container">
          <div v-for="(item,index) in materialList" :key="index">
            <div class="material-name">{{item.name}}</div>
            <img :src="item.src" alt="">
            <a href="#" v-if="index==1">点击查看样例</a>
            <a href="#" v-if="index==2">
              <div>
                <img src="~@/assets/images/word-logo.png" alt="">
                <div> 授权委托书模板.doc</div>  
              </div>
              </a>
          </div>
      </div>
      <div class="canel-btn">
           <el-button type="primary" @click="dialogSeeMoreVisible1=false">准备好了</el-button>
      </div>
    </el-dialog>
  </div>

  <div class="terms-info">
    <el-dialog v-model="dialogSeeMoreVisible" :show-close="false"  :fullscreen="true">
          <div class="info-title">欢迎您在此注册上海天好集团网上招标平台会员！</div>
          <div class="info-container">
            <div>请仔细阅读本下述文本，我们将依据以下服务条款提供您所享有的服务，如果您接受，请点按“同意”进入注册页面。 </div>
            <div>本电子商务平台具有众多的商业机会，旨在 采用现代网络技术手段，及时发布本单位及下属相关单位各项目在建设,运营和管理过程中，包括货物,工程及服务在内的招标与采购;也是社会各类企业参与我公司各单位招标，以及产品介绍、获取和发布信息的专业网站；同时又是实现我公司与合作伙伴信息传递、合作、管理的平台。 </div>
            <div>我公司所属各单位的各类招标与采购信息、招标预告、中标公告、合作单位评价等的相关信息，均将在该网站上及时公布，请有关单位密切关注。凡与工程（施工或总承包）、物资（如设备及材料的生产、销售或供应）、服务（如勘察、设计、咨询、评估、监理、代理）等项目的招标投标、采购和供应等业务有关的境内、外合法的、具有独立法人与经营资格的企业、机构和组织（政府或非政府），均可申请注册成为会员。</div>
            <div>会员在注册过程中，您将选择会员注册用户名和密码。您须自行负责对您的会员注册用户名和密码的保密，且需对您在会员注册用户名和密码下发生的所有活动承担责任。</div>
            <div>注册时，您必须填写正确的企业资料(企业类型、业务范围、企业简介、营业执照等)、联系电话、通讯地址，以便我们核对企业的身份及今后对企业的服务提供方便。</div>
            <div>本章程受中国法律管辖，应依中国法律进行解释。 </div>
            <div>本章程是对会员与网站的其他既有协议和约定的补充而非替代，如本章程与其他既有协议和约定有冲突，就使用网上交易服务而言，应以本章程为准。 </div>
            <div>本章程的任何条款如因任何原因而被确认无效，都不影响本协议其他条款的效力。 </div>
            <div>本章程自会员注册成功并通过网站内部审核通过之日起正式生效。</div>
            <div>本电子商务平台具有众多的商业机会，旨在 采用现代网络技术手段，及时发布本单位及下属相关单位各项目在建设,运营和管理过程中，包括货物,工程及服务在内的招标与采购;也是社会各类企业参与我公司各单位招标，以及产品介绍、获取和发布信息的专业网站；同时又是实现我公司与合作伙伴信息传递、合作、管理的平台。</div>
            <div>我公司所属各单位的各类招标与采购信息、招标预告、中标公告、合作单位评价等的相关信息，均将在该网站上及时公布，请有关单位密切关注。凡与工程（施工或总承包）、物资（如设备及材料的生产、销售或供应）、服务（如勘察、设计、咨询、评估、监理、代理）等项目的招标投标、采购和供应等业务有关的境内、外合法的、具有独立法人与经营资格的企业、机构和组织（政府或非政府），均可申请注册成为会员。</div>
          </div>
            <div class="canel-btn">
              <el-button type="primary" @click="dialogSeeMoreVisible=false">已阅读</el-button>
            </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { useRouter } from "vue-router";

  export default defineComponent({
    setup(props, context) {
      const router = useRouter();
      function registered() {
        console.log(context);
        router.push("/RegisteredSuccessful");
      }

      return {
        registered,
      };
    },
    data() {
      return {
        dialogSeeMoreVisible:false,
        materialList:[
          {
            name:"营业执照",
            src:require("../../assets/images/business-license.png")
          },
          {
            name:"一般纳税人证明材料",
            src:require("../../assets/images/taxpayer.png")
          },
          {
            name:"授权委托书",
            src:require("../../assets/images/authorize.png")
          },
          {
            name:"资质证书扫描件",
            src:require("../../assets/images/qualification.png")
          },
          {
            name:"主营业务收入证明",
            src:require("../../assets/images/income.png")
          },
          {
            name:"法人身份证",
            src:require("../../assets/images/id-card.png")
          },
        ],
        dialogSeeMoreVisible1: false,
        checked: false,
        labelPosition: "top",
        rules: {
          key1: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
          key2: [
            { required: true, message: "请输入登录人姓名", trigger: "blur" },
          ],
          key3: [
            { required: true, message: "请输入登录人电子邮箱", trigger: "blur" },
          ],
          key4: [{ required: true, message: "请选择注册类型", trigger: "blur" }],
          key5: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
          key6: [{ required: true, message: "请确认密码", trigger: "blur" }],
          key7: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
          key8: [
            {
              required: true,
              message: "请输入统一社会信用代码",
              trigger: "blur",
            },
          ],
          key9: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          key10: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        },
        formLabelAlign: {
          key1: "",
          key2: "",
          key3: "",
          key4: "",
          key5: "",
          key6: "",
          key7: "",
          key8: "",
          key9: "",
          key10: "",
        },
      };
    },
  });
</script>


<style lang="scss" scoped>
.registered-wrap {
  width: 100%;
  height: 100%;
  padding-bottom: 80px;
  background: url("~@/assets/images/registered-mc.png");
  background-size: cover;
  .registered-title {
    padding-top: 80px;
    text-align: center;
    img {
      height: 57px;
    }
  }
  .registered-containner {
    width: 988px;
    min-height: 560px;
    transform: translateX(222px);
    background: url("~@/assets/images/registered-in-pn.png");
    background-size: cover;
    padding-top: 35px;
    padding: 45px 80px 0;
    /deep/ .el-form-item__label {
      line-height: 20px;
    }
    /deep/ .el-form--label-top .el-form-item__label {
      padding: 0 0 5px;
    }
    /deep/ .el-form-item__content,
    .el-input {
      height: 32px;
      line-height: 32px;
    }
    /deep/ .el-input__inner {
      border: none;
      height: 32px;
      line-height: 32px;
    }
    /deep/ .el-form-item {
      margin-bottom: 19px;
      border-bottom: 1px solid #dcdcdc;
    }
    .is-error.el-form-item {
      border-bottom: 1px solid red;
    }
  }
  .registered-btn {
    text-align: center;
    .el-button {
      width: 260px;
      height: 44px;
    }
  }
}
.check-out-the-material {
  /deep/ .el-dialog {
    width: 550px !important;
    height: 544px;
    background: #FFFFFF;

  }
  /deep/ .el-dialog__body{
    padding: 0 20px;
  }
}
.check-out-the-material .material-title {
  height: 24px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 24px;
  color: #333333;
  opacity: 1;
  text-align: center;
}
.material-container{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
  &>div{
    display: flex;
    flex-direction: column;
    padding:0 20px;
    margin-bottom: 45px;
    
  }
  a{
    text-decoration: none;
    text-align: center;
    color: #1890FF;
    margin-top: 5px;
    &>div{
      display: flex;
      align-items: center;
      &>img{
      width: 16px;
      height: 16px;
      margin: 0;
    }
    }
    
  }
  .material-name{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 19px;
    color: #666666;
    text-align: center;
  }
  img{
    width: 120px;
    height: 120px;
    margin-top: 10px;
  }
  
}
.canel-btn{
    text-align: center;
}

.terms-info{
  /deep/ .el-dialog__header{
    padding: 0;
  }
    .info-title{
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 24px;
      color: #333333;
      opacity: 1;
      text-align: center;
      padding-bottom: 20px;
    }
    .info-container{
      width: 860px;
      height: 825px;
      margin: 0 auto;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 24px;
      color: #666666;
      opacity: 1;
      &>div{
        margin-top: 20px;
      }
    }
  }
</style>